<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view" style="padding-top: 0px">
			<div class="pl-5 h-full relative" style="background: #fff">
				<div class="flex h-16 items-center">
					<el-row class="mr-16">
						<div
							class="w-36 h-10 cursor-pointer flex justify-center items-center gap-2"
							style="background: #5a78b7; color: #fff; border-radius: 4px"
							@click="roleDialogRef.openDialog({})"
						>
							<img src="/src/assets/user/创建用户.png" class="custom-icon" alt="add" />
							<span>创建角色</span>
						</div>
					</el-row>
					<el-row v-show="showSearch" class="gap-7">
						<el-form-item label="角色名称" prop="roleName">
							<el-input v-model="state.queryForm.roleName" placeholder="请输入角色名称" />
						</el-form-item>
						<el-form-item label="是否管理员" prop="managerFlag">
							<el-select v-model="state.queryForm.managerFlag" clearable placeholder="请选择是否管理员">
								<el-option label="是" value="1"></el-option>
								<el-option label="否" value="0"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="角色状态" prop="lockFlag">
							<el-select v-model="state.queryForm.lockFlag" clearable placeholder="请选择用户状态">
								<el-option label="正常" value="0"></el-option>
								<el-option label="锁定" value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-row>

					<div class="absolute right-5">
						<el-button class="btnReset" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
						<el-button class="btnSearch" @click="getDataList">{{ $t('common.queryBtn') }}</el-button>
					</div>
				</div>
				<el-table
					:data="state.dataList"
					v-loading="state.loading"
					style="width: 100%"
					@selection-change="handleSelectionChange"
					stripe
					:cell-style="tableStyle.cellStyle"
					:header-cell-style="tableStyle.headerCellStyle"
				>
					<el-table-column prop="roleName" label="角色名称"></el-table-column>
					<el-table-column prop="roleId" label="角色ID"></el-table-column>
					<el-table-column prop="funcType" label="功能权限" width="200">
						<template #default="scope">
							<div class="flex items-center w-full justify-center">
								<el-tag v-for="(item, index) in scope.row.funcType?.split(',')" :key="index" class="mr-1">
									{{ item.trim() === '0' ? '基础' : '订阅' }}
								</el-tag>
								<el-icon size="14" color="#3156A5" class="ml-4 cursor-pointer" @click="roleDialogRef.editDialog(scope.row, '2')"><EditPen /></el-icon>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="spaceSizeName" label="空间设置" width="150">
						<template #default="scope">
							<div class="flex items-center w-full justify-center">
								<span>{{ scope.row.spaceSize == '-1' ? '无限制' : scope.row.spaceSizeName }}</span>
								<el-icon size="14" color="#3156A5" class="ml-4 cursor-pointer" @click="roleDialogRef.editDialog(scope.row, '3')"><EditPen /></el-icon>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="managerFlag" label="是否管理员">
						<template #default="scope">
							<el-checkbox :model-value="scope.row.managerFlag == 1" />
						</template>
					</el-table-column>
					<el-table-column prop="testerFlag" label="是否测试员">
						<template #default="scope"> <el-checkbox :model-value="scope.row.testerFlag == 1" /> </template
					></el-table-column>
					<el-table-column prop="createTime" label="创建日期" show-overflow-tooltip></el-table-column>
					<el-table-column prop="userCount" label="用户人数"></el-table-column>
					<el-table-column prop="md" label="用户名单">
						<template #default="scope">
							<el-icon size="14" color="#3156A5" class="ml-4 cursor-pointer" v-if="scope.row.userCount" @click="handleDetail(scope.row)"
								><ZoomIn
							/></el-icon>
						</template>
					</el-table-column>
					<el-table-column prop="lockFlag" label="角色状态">
						<template #default="scope">
							<el-switch :model-value="scope.row.lockFlag == '0'" active-color="#7DDF84" inactive-color="#D7DEF0" />
						</template>
					</el-table-column>
					<el-table-column :label="$t('common.action')">
						<template #default="scope">
							<div class="flex justify-center w-full">
								<span :class="scope.row.lockFlag == '0' ? 'recoverName' : 'cursor-pointer logoutName'" @click="handleDelete(scope.row.roleId)"
									>删除</span
								>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<pagination class="relative" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
			</div>
		</div>

		<!-- 角色编辑、新增  -->
		<role-dialog ref="roleDialogRef" @refresh="getDataList()" />
		<!-- 授权 -->
		<permession ref="permessionRef" />

		<!-- 查看名单弹窗 -->
		<el-dialog :close-on-click-modal="false" title="用户名单" draggable width="347px" v-model="visiblePerson">
			<el-form-item label="用户名单">
				<div class="flex flex-col">
					<p v-for="item in roleDataOther" :key="item.userId">
						<el-checkbox :label="item.userId" checked="true">{{ item.username }}</el-checkbox>
					</p>
				</div>
			</el-form-item>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemRole">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { pageList, delObj } from '/@/api/admin/role';
import { pageList as userList } from '/@/api/admin/user';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
const roleDataOther = ref([]);
// 引入组件
const RoleDialog = defineAsyncComponent(() => import('./form.vue'));
const Permession = defineAsyncComponent(() => import('./permession.vue'));
const { t } = useI18n();
const visiblePerson = ref(false);
// 定义变量内容
const roleDialogRef = ref();
const userValue = ref('');
const permessionRef = ref();
const excelUploadRef = ref();
const queryRef = ref();
const showSearch = ref(true);
// 多选rows
const selectObjs = ref([]) as any;
// 是否可以多选
const multiple = ref(true);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: pageList, // H
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	state.queryForm = {};
	getDataList();
};
const handleDetail = async (row) => {
	const { data } = await userList({
		roleId: row.roleId,
		current: 1,
		size: 100,
	});
	roleDataOther.value = data.records;
	visiblePerson.value = true;
};
// 导出excel
const exportExcel = () => {
	downBlobFile('/admin/role/export', state.queryForm, 'role.xlsx');
};

// 是否可以多选
const handleSelectable = (row: any) => {
	return row.roleId !== '1';
};

// 多选事件
const handleSelectionChange = (objs: { roleId: string }[]) => {
	selectObjs.value = objs.map(({ roleId }) => roleId);
	multiple.value = !objs.length;
};

// 删除操作
const handleDelete = async (id) => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		await delObj([id]);
		getDataList();
		useMessage().success(t('common.delSuccessText'));
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};
</script>

<style lang="scss" scoped>
.topName {
	width: 24%;
	height: 80px;
	background: #ffffff;
	border-radius: 8px 8px 8px 8px;
	font-weight: bold;
	font-size: 18px;
	color: #474c65;
	position: relative;
	.top-num {
		font-weight: 800;
		font-size: 28px;
		color: #4267b7;
		position: absolute;
		right: 64px;
	}
}
:deep(.el-form-item--default) {
	margin-bottom: 0px;
}
:deep(.el-table) {
	height: 82%;
}
.recoverName {
	font-weight: 500;
	font-size: 14px;
	color: #c6cfe7;
	text-decoration-line: underline;
	cursor: not-allowed; // 禁止光标
	opacity: 0.5; // 降低透明度
}
.logoutName {
	font-weight: 500;
	font-size: 14px;
	color: #ff5b5b;
	text-decoration-line: underline;
}
.tagName {
	width: 72px;
	height: 24px;
	text-align: center;
	font-weight: 500;
	font-size: 14px;
	color: #1f86ff;
	background: rgba(192, 223, 255, 0.8);
	border-radius: 4px 4px 4px 4px;
}
.lockName {
	width: 60px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	border-radius: 20px 20px 20px 20px;
}
.normal {
	background: rgba(181, 240, 185, 0.8);
	color: #29b220;
}
.locked {
	background: rgba(255, 226, 210, 0.8);
	color: #e86a23;
}
:deep(.el-pagination__total) {
	position: absolute;
	left: 0px;
}
</style>
